<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue';
import Sortable from 'sortablejs';

const using = useTemplateRef<HTMLElement>('using');

const list = ref(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']);

onMounted(() => {
    new Sortable(using.value!.querySelector('.flex-box') as HTMLElement, {
        animation: 150,
        onEnd: (evt) => {
            if (evt.oldIndex && evt.newIndex) {
                const temp = list.value[evt.oldIndex]!;
                list.value[evt.oldIndex] = list.value[evt.newIndex]!;
                list.value[evt.newIndex] = temp;
            }
        },
    });
});
</script>

<template>
    <div class="using" ref="using">
        {{ list }}
        <div class="flex-box">
            <div class="item" v-for="item of list" :key="item">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.using {
    .flex-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .item {
            flex-shrink: 0;
            width: 200px;
            height: 100px;
            background: #ea8383;
            margin: 10px;
            display: grid;
            place-items: center;
        }
    }
}
</style>
